<template>
  <view class="my-settle-container">
    <view class="radio">
      <radio :checked="allCheck"
             color="#c00000"
             @click='changeAllChecked(!allCheck)' />
      <view>全选</view>
    </view>

    <view>合计:<text class="amount">￥{{getTotalSelectGoodsPrice}}</text></view>
    <view class="btn-settle"
          :style="{backgroundColor:getTotalSelectGoods?'#c00000':'#ccc'}"> <button class="btn-settle"
              :style="{backgroundColor:getTotalSelectGoods?'#c00000':'#ccc'}"
              @click="totalPay">结算({{getTotalSelectGoods}})</button></view>
  </view>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
export default ({
  data () {
    return {
      time: 3,
      timer: null
    };
  },
  computed: {
    ...mapGetters('cart', ['allCheck', 'getTotalSelectGoods', 'getTotalSelectGoodsPrice', 'getGoods']),
    ...mapGetters('user', ['getAddress', "getToken"])
  },
  methods: {
    ...mapMutations('cart', ['changeSingleStatus']),
    ...mapMutations('user', ['setRedirectiveInfo', 'joinAddress']),
    changeAllChecked (status) {
      this.changeSingleStatus(status)
    },
    // 点击结算：判断是否选中有商品，判断是否有收货地址，判断是否登陆
    async totalPay () {
      // 判断是否选中商品
      if (!this.getTotalSelectGoods) {
        // 提醒用户要选择商品
        uni.showToast({
          title: '请选择商品',
          icon: 'error'
        })
        return
      }
      // 判断是否选则收货地址
      if (!this.getAddress) {
        uni.showToast({
          title: '请选择收货地址',
          icon: 'error'
        })
        return
      }
      // 判断是否登陆并携带token
      // 如果token不存在的话，启动倒计时跳转到登陆页面，，并且当登陆成功之后再跳转到被迫退出的页面，完成没有完成的操作
      if (!this.getToken) {
        // 开启定时器步骤，
        // 1、首先要把渲染的东西先渲染在页面上
        // 2、再开启定时器进行逻辑运算，
        // 3、判断边界值是否超出临界值，清除定时器并还原判断依据的data值
        // 1、渲染
        uni.showToast({
          title: `您还没有登陆，${this.time}秒之后将回到登陆页面`,
          icon: 'none'
        })
        // 2开启定时器
        this.timer = setInterval(() => {
          //4 判断临界值
          if (this.time <= 1) {
            clearInterval(this.timer)
            // 把临界值设置成初始值,避免下一次还会发生
            this.time = 3
            // 跳转到登陆页面，并且再仓库中保存当前页面，便于登陆成功后直接跳转回来
            uni.switchTab({
              url: '/pages/my/index',
              success: () => {
                this.setRedirectiveInfo('/pages/cart/index')
              }
            })
            return
          }
          // 3实现定时器的效果
          this.time--
          uni.showToast({
            title: `您还没有登陆，${this.time}秒之后将回到登陆页面`,
            icon: 'none'
          })
        }, 1000)
        return

      }
      // // 具备所有条件后调换到我的信息页面
      // uni.switchTab({
      //   url: '/pages/my/index'
      // })
      // 下单支付完成
      // 首先获取下单所需要的参数
      let params = {
        order_price: this.getTotalSelectGoodsPrice,
        consignee_addr: `${this.getAddress.provinceName}${this.getAddress.cityName}${this.getAddress.countyName}${this.getAddress.detailInfo}`,
        // goods: this.getGoods.filter(item => item.goods_status === true).map(item => {
        //   return {
        //     goods_id: item.goods_id,
        //     goods_number: item.good_number,
        //     goods_price: item.goods_price
        //   }
        // })
        goods: this.getGoods.filter(item => {
          return item.goods_states === true
        })
      }
      // 请求后台接口获取订单号
      let { meta: { status }, message } = await uni.$request({
        url: 'my/orders/create',
        method: "POST",
        data: params
      })
      // 判断获取订单号是否成功
      if (!status === 200) return
      // 解构出获取到的订单号
      const { order_number } = message
      // 获取到的订单号向后台发送请求获取支付信息
      const { meta: { status: status2 }, message: message2 } = await uni.$request({
        url: 'my/orders/req_unifiedorder',
        method: "POST",
        data: {
          order_number
        }
      })
      //  判断获取订单支付信息是否成功
      if (!status2 == 200) return
      // 获取预付订单信息
      const { pay } = message2
      console.log(pay);
      // 调用微信小程序内的自定义方法来获取支付弹框
      wx.requestPayment({
        ...pay,
        // 接口调用成功
        success: (err) => {
          console.log(err);
          // 调用成功调用支付接口，返回支付信息
        },
        // 接口调用失败
        fail: (err) => {
          console.log(err);
        }
      })

    }
  }

})
</script>

<style lang="scss" scoped>
.my-settle-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  // 将背景色从 cyan 改为 white
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 5px;
  font-size: 14px;

  .radio {
    display: flex;
    align-items: center;
  }

  .amount {
    color: #c00000;
  }

  .btn-settle {
    height: 50px;
    // min-width: 100px;
    background-color: #c00000;
    color: white;
    line-height: 50px;
    text-align: center;
    padding: 0 10px;
  }
}
</style>